<template>
  <div id="app" class="home">
    <nav-bar/>
    <div>
      <div class="charge-title">充值订单：<img src="../../assets/star.png" width="5px" height="5px"></div>
      <div class="charge-order" id="order">
        <div class="content" v-show='showList'>{{order_msg}}</div>
        <div class="content" v-show='!showList'>
          <div><span>提交时间</span><span>{{showOrderCard.ts}}</span></div>
          <div><span>支付方式</span><span>{{showOrderCard.pay_type}}</span></div>
          <div><span>支付金额</span><span>{{showOrderCard.price}}</span></div>
          <div><span>订单号</span><span>{{showOrderCard.id}}</span></div>
        </div>
        <div class="right-arrow" @click='chooseOrder("order")'><img src="../../assets/orderbarclickbutton.png"></div>
      </div>
      <div class="charge-title">付款时间：</div>
      <div class="charge-order" id='pay-time' ref="getPayat">
        <div class="content edit-input">
          {{pay_at | filterFun}}
          <!--<input v-model="appealData.pay_at" placeholder="" class="charge-input" ref="editNum">-->
        </div>
        <div class="right-arrow" @click='showDateTimePicker'><img src="../../assets/clickbutton.png"></div>
      </div>
      <div class="charge-title">充值金额：</div>
      <div class="charge-order" id='charge-num'>
        <div class="content edit-input">
          <input v-model.number="appealData.pay_amount" placeholder="" class="charge-input" ref="editNum">
        </div>
        <div class="right-arrow" @click="focusclick">编辑</div>
      </div>
      <div class="charge-title">付款实名制姓名：<span style="font-size: 13px;">(请填写真实姓名)</span><img src="../../assets/star.png" width="5px" height="5px"></div>
      <input v-model="appealData.name" placeholder="" class="pay-input" type="text" name="username"
             v-on:blur="nameisChinese" minlength="1" maxlength="10">
      <p style="margin: 1px 0 0 7%; color: red; font-size: 12px;" v-show='nameRule'>须填写正确信息</p>
      <div class="charge-title">补充描述：</div>
      <cube-textarea v-model="appealData.desc" placeholder="您有任何想法可以在这里说明哦～" class="pay-textarea" :maxlength="1000"></cube-textarea>
      <div class="charge-title">提交凭证&nbsp;&nbsp;(付款截图)：<img src="../../assets/star.png" width="5px" height="5px"></div>
      <div class="charge-title" @click='chooseOrder("uploadShouldKnow")'><cube-radio-group v-model="selected" :options="options"/></div>
      <!-- 图片上传 -->
      <div class="upload-box">
        <cube-upload class="cube-upload" v-model="uploadfiles" :max="5" :action="upAction" :auto="false" :simultaneous-uploads="1" @files-added="filesAdded" @file-submitted="filesSubmitted" @file-success="filesSuccess" @file-error="fileError" @file-removed="fileRemoved"/>
        <!-- <div class="upload">
          <div @click='chooseOrder("uploadShouldKnow")'>查看示例</div>
        </div> -->
      </div>
      <div class="submit">
        <div>审核结果会以邮件方式发送，请耐心等待</div>
        <!-- 此部分可用error数组优化 -->
        <div style='color: red; font-size: 12px;' v-show='orderRule'>无充值订单信息不能提交</div>
        <div style='color: red; font-size: 12px;' v-show='moneyRule'>请正确填写充值金额</div>
        <div style='color: red; font-size: 12px;' v-show='realNameRule'>请填写姓名</div>
        <div style='color: red; font-size: 12px;' v-show='picRule'>请上传截图凭证</div>
        <div style='color: red; font-size: 12px;' v-show='oneRule'>提交记录内尚有订单审核未完成，无法再提交</div>
        <div style='color: red; font-size: 12px;' v-show='minRule'>充值订单提交时间尚未超过10分钟，无法提交</div>
        <div @click="submitAppeal" :disabled='disabled'>
          <img :src="subimtSrc">
        </div>
      </div>
    </div>
    <!-- <cube-button>show toast</cube-button> -->
    <van-popup v-model="showChargeOrder" :position="value=='date'?'bottom':null" :class="value=='date'?null:'orderpup'" :id="value=='uploadShouldKnow'?'uploadknow':null">
      <!-- 显示订单遮罩层 -->
      <div class="charge-content" v-if="value=='order'" style="height: auto; overflow: hidden;">
         <!--<div style="position: fixed; top: 0; left: 0; width: 100%;">-->
        <div>
          <div class="title1">请选择充值订单</div>
          <div class="title2">可选择近七天未完成订单</div>
          <img src="../../assets/close2.png" @click='showChargeOrder=false'>
        </div>
        <div v-if="Unpaylist" style="height: 375px;overflow-y: scroll;">
          <ul v-if="Unpaylist.length">
            <li v-for="(item,index) in Unpaylist" :key="index" @click="addMsg(item)">
              <div><span>提交时间：</span><span>{{item.ts}}</span></div>
              <div><span>支付方式：</span><span>{{item.pay_type}}</span></div>
              <div><span>支付金额：</span><span>{{item.price}}</span></div>
              <div><span>订单号：</span><span>{{item.id}}</span></div>
            </li>
          </ul>
          <div  v-else style="text-align:center; margin:30px 0;">
            ~~暂无订单数据~~
          </div>
        </div>
        <div  v-else style="text-align:center; margin:30px 0;">
          ~~暂无订单数据~~
        </div>
      </div>
      <!-- 显示图片上传须知遮罩层 -->
      <div v-if="value=='uploadShouldKnow'">
        <div class="mask-iknow">
          <div class="content">
            <div class="title" style="color: red;">截图必须包含订单号</div>
              <van-swipe :autoplay="3000" indicator-color="#d48722" class="vanswipe">
                <van-swipe-item><p>微信转银行卡</p><img src="../../assets/example1.jpg"></van-swipe-item>
                <van-swipe-item><p>支付宝红包</p><img src="../../assets/example2.jpg"></van-swipe-item>
                <van-swipe-item><p>支付宝红包2</p><img src="../../assets/example3.jpg"></van-swipe-item>
                <van-swipe-item><p>支付宝收款码(线上定额支付宝)</p><img src="../../assets/example4.jpg"></van-swipe-item>
                <van-swipe-item><p>支付宝收款码(线上定额支付宝)2</p><img src="../../assets/example5.jpg"></van-swipe-item>
                <van-swipe-item><p>支付宝转银行卡</p><img src="../../assets/example6.jpg"></van-swipe-item>
              </van-swipe>
              <img class="iknow-img" src="../../assets/iknow.png" @click="showChargeOrder=false">
          </div>
        </div>
      </div>
    </van-popup>
    <div v-show='showLoading' v-on:click.stop="doThis" style="position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.55);z-index: 999998;pointer-events:none">
      <cube-loading :size="40" style="position:fixed;top: 50%; left: 50%;  transform: translate(-50%, -50%)" ></cube-loading>
      <div style="position:fixed;top: 60%; left: 50%; transform: translate(-50%, -50%);color:white;">稍等，图片处理中 {{uploadMsg?uploadMsg:'0'}}%</div>
    </div>
  </div>
</template>

<script>
  // const dateFormat = require('dateformat')
  import {Cell, Button, DatetimePicker, Field, Popup, Uploader, Swipe, SwipeItem} from 'vant'
  import NavBar from '@/components/NavBar.vue'
  import {getpayInfo, setRequestHaeder, submitAppeal, getQiniuUploadToken, getappealList} from '@/api'
  import goodButton from '../../assets/apply.png'
  import badButton from '../../assets/10.png'
  import * as qiniu from 'qiniu-js'


  export default {
    components: {
      NavBar,
      goodButton,
      badButton,
      [Cell.name]: Cell,
      [Button.name]: Button,
      [DatetimePicker.name]: DatetimePicker,
      [Field.name]: Field,
      [Uploader.name]: Uploader,
      [Popup.name]: Popup,
      [Swipe.name]: Swipe,
      [SwipeItem.name]: SwipeItem
    },
    filters: {
      filterFun (value) {
        if(value&&value.length>16) {
          value = value.substring(0,16)
        }
        return value
      }
    },
    data() {
      return {
        selected: '',
        options: ['查看示例'],
        showChargeOrder: false,
        order_msg: '从右侧选择充值订单',
        showList: true,
        Unpaylist: [],
        recordList: {},
        appealData: {},
        qiutoken: {},
        uploadfiles: [],
        pay_at: '',
        upAction: {
          target: 'http://up-z2.qiniup.com',
          data: new FormData()
        },
        showOrderCard: '',
        filename: [],
        showIknow: false,
        show: false,
        minHour: 10,
        maxHour: 20,
        minDate: new Date(2018, 10, 1),
        maxDate: new Date(),
        currentDate: new Date(),
        value: '',
        nameRule: false,
        disabled: true,
        subimtSrc: goodButton,
        time: 10,
        orderRule: false,
        timeRule: false,
        moneyRule: false,
        realNameRule: false,
        picRule: false,
        oneRule: false,
        minRule: false,
        showLoading: false,
        timer: '',
        uploadMsg: '',
        filenameNew: []
      }
    },
    created() {
      this.setRequestHaeder()
      console.log('test')
    },
    mounted() {
      let appealexpires = document.cookie.indexOf("appealexpires=true")
      if(appealexpires>-1){
        this.disabled = true
        this.subimtSrc = badButton
      }
      this.getUnpayStatus()
      this.getRecordList()
    },
    methods: {
      filesAdded (files) {
       let issee= this.seeexample();
        let hasIgnore = false
        const maxSize = 10 * 1024 * 1024 // 10M
        for (let k in files) {
          const file = files[k]
          if (file.size > maxSize ) {
            file.ignore = true
            hasIgnore = true
          }else if(!issee&&file!==1){
            console.log('p')
            file.ignore = true
          }
        }
        hasIgnore && this.$createToast({
          type: 'warn',
          time: 2000,
          txt: '选择的文件不能大于10M'
        }).show()
      },
      seeexample(){
        if(!this.selected.includes(this.options)){
          this.$createDialog({
            type: 'alert',
            content: '<p class="text-center">请选择<span class="color-red">查看示例</span>,</br>并按照示例提交付款凭证哦～</p>',
            confirmBtn: {
              text: '我知道了',
              active: true
            }
          }).show()
          return false;
        }else{
          return true
        }
      },
      filesSubmitted(f) {
        this.showChargeOrder = false
        let PicArr = f.file.name.split('.')
        let str1= PicArr[PicArr.length-1]
        getQiniuUploadToken(`api/third/up_info/?p=${this.$router.history.current.query.p}`, {filename: f.file.name}).then(res => {
          if (res.status === 0) {
            this.qiutoken = res.data
            let data = new FormData()
            data.append('file', f.file)
            this.filename.push(`${this.qiutoken.path_prefix}/${Date.now()}-${Math.floor(Math.random(0, 1) * 10000000)}.${str1}`)
            data.append('key', this.filename[this.filename.length -1])
            // data.append('key', `${this.qiutoken.path_prefix}/${f.name}`)
            // data.append('saveKey', this.qiutoken.path_prefix)
            data.append('token', this.qiutoken.token)

            this.showLoading = true
            var observable = qiniu.upload(f.file, this.filename[this.filename.length -1], this.qiutoken.token)
            let that = this

            var observer = {
              next(res){
                //接收上传进度信息
                console.log(res)
                that.uploadMsg = parseInt(res.total.percent)
                console.log(that.uploadMsg)
              },
              error(err){
                //处理错误情况，提示用户该图片上传失败
                console.log(err)
                that.showLoading = false
                if(that.filename.length > 0){
                  that.filename.pop()
                  that.fileError()
                }
              },
              complete(res){
                //上传完成
                console.log('上传成功！',res)
                that.filenameNew.push(res.key)
                console.log(that.filenameNew)
                that.showLoading = false
              }
            }
            observable.subscribe(observer) // 上传开始
            // qiniuUpload(data).then(res => {
            //   console.log(res)
            // })
          }
        }).catch(() => {
          this.toast = this.$createToast({
            txt: '图片处理异常，稍后再试',
            time: 4000,
            type: 'txt'
          })
          this.toast.show()
        })
      },
      fileRemoved(f) {
        console.log(f)
      },
      filesSuccess(file){
        console.log(file)
      },
      fileError(){
        this.$createToast({
          type: 'warn',
          time: 2000,
          txt: '选择文件失败，请删除后重新选择文件'
        }).show()
      },
      setRequestHaeder() {
        setRequestHaeder(this.$router.history.current.query)
      },
      submitAppeal() {
        this.appealData.pay_at = this.pay_at
        this.appealData.receipt = this.filenameNew
        // this.uploadfiles.map(item => {
        //   this.appealData.receipt.push(`${this.qiutoken.path_prefix}/${item.name}`)
        // })
        this.orderRule= false
        this.timeRule= false
        this.moneyRule= false
        this.realNameRule= false
        this.picRule= false
        this.oneRule= false
        this.minRule= false
        if(this.showList) {
          this.orderRule= true
          return
        }
        if(!this.appealData.pay_amount || isNaN(this.appealData.pay_amount)) {
        // if(!this.appealData.pay_amount && !isNaN(this.appealData.pay_amount) && parseInt(this.appealData.pay_amount) !== 0) {
          this.moneyRule= true
          return
        }
        if(!this.appealData.name) {
          this.realNameRule= true
          return
        }
        if(!this.uploadfiles.length) {
          this.picRule= true
          return
        }
        // if(this.recordList.list[0].status==0 || this.recordList.list[0].status==1) {
        //   this.oneRule = true
        //   return
        // }
        if(this.recordList.list){
          this.recordList.list.map(item=> {
            if([0, 1].includes(item.status)){
              this.oneRule = true
              return
            }
          })
        }
        // 付款10分钟后才可提交 校验
        // if(new Date().getTime()-new Date(this.showOrderCard.ts).getTime() < 600000) {
        //   this.minRule= true
        //   return
        // }
        // debugger
        // if(this.filenameNew.length>0){
          submitAppeal(this.appealData).then(res => {
            if (res.status === 0) {
              this.orderRule= false
              this.timeRule= false
              this.moneyRule= false
              this.realNameRule= false
              this.picRule= false
              this.oneRule= false
              this.minRule= false
              const QuerySerch = location.search
              location.href = `/success/index.html${QuerySerch}`
            } else {
              this.toast = this.$createToast({
                txt: res.data.msg,
                time: 4000,
                type: 'txt'
              })
              this.toast.show()
            }
          }).catch(error =>{
            if(error.response.data.msg) {
              this.toast = this.$createToast({
                txt: error.response.data.msg,
                time: 4000,
                type: 'txt'
              })
              this.toast.show()
            }
          })
        // }else {
        //   this.$createToast({
        //   type: 'txt',
        //   time: 3000,
        //   txt: '操作频繁，稍后再从客户端进入申诉'
        // }).show()
        // }
      },
      chooseOrder(pup) {
        this.showChargeOrder = true
        this.value = pup
      },
      showDateTimePicker(){
        if (!this.dateTimePicker) {
          this.dateTimePicker = this.$createDatePicker({
            title: '请选择时间',
            min: new Date(2018, 7, 8, 8, 0),
            max: new Date(2020, 9, 20, 20, 59),
            value: new Date(),
            columnCount: 5,
            format: {
              year: 'YYYY年',
              month: 'MM月',
              date: 'DD日',
              hour: 'hh时',
              minute: 'mm分'
            },
            onSelect: (date, selectedVal)=>this.selectHandle(date, selectedVal)
          })
        }
        console.log(this.dateTimePicker)

        this.dateTimePicker.show()
      },
      selectHandle(date, selectedVal) {
        // this.appealData.pay_at = null
        console.log(date, selectedVal)
        this.pay_at = `${selectedVal[0]}-${selectedVal[1]}-${selectedVal[2]} ${selectedVal[3]}:${selectedVal[4]}`
        // Object.assign(this.appealData, {pay_at: seltime})
        // console.log(this.appealData, seltime)
      },
      addMsg(item) {
        this.showList = false
        this.showOrderCard = item
        this.appealData.pay_id = item.id
        this.pay_at = item.ts
        this.appealData.pay_amount = item.price
        this.showChargeOrder = false
      },
      phoneAddMsg() {
        this.Unpaylist.map( ( item ) =>{
          if(this.$route.query.orderid===item.id){
            this.addMsg(item)
          }
        })
        if(this.order_msg==='数据加载中......'){
          this.order_msg = '从右侧选择充值订单'
        }
      },
      getUnpayStatus() {
        let that = this
        getpayInfo({page: 0,status: 1}).then(res => {
          // 获取最多60条数据
          if (res.status === 0) {
            that.Unpaylist = res.data.pays_info

            if(that.Unpaylist.length==10) {
              getpayInfo({page: 1,status: 1}).then(res1 => {
                if (res1.data.pays_info.length>=0){
                  that.Unpaylist=that.Unpaylist.concat(res1.data.pays_info)
                }
                
                if(that.Unpaylist.length==20) {
                  getpayInfo({page: 2,status: 1}).then(res2 => {
                    if (res2.data.pays_info.length>=0){
                      that.Unpaylist=that.Unpaylist.concat(res2.data.pays_info)
                    }
                    
                    if(that.Unpaylist.length==30) {
                      getpayInfo({page: 3,status: 1}).then(res3 => {
                        if (res3.data.pays_info.length>=0){
                          that.Unpaylist=that.Unpaylist.concat(res3.data.pays_info)
                        }
                        
                        if(that.Unpaylist.length==40) {
                          getpayInfo({page: 4,status: 1}).then(res4 => {
                            if (res4.data.pays_info.length>=0){
                              that.Unpaylist=that.Unpaylist.concat(res4.data.pays_info)
                            }
                            
                            if(that.Unpaylist.length==50) {
                              getpayInfo({page: 5,status: 1}).then(res5 => {
                                if (res5.data.pays_info.length>=0){
                                  that.Unpaylist=that.Unpaylist.concat(res5.data.pays_info)
                                } 
                              })
                            }
                          })
                        }
                      })
                    }
                  })
                }
              })
            }                                                 
          }
        })
        .then(()=>{
          // 下面为客户端点击 申诉 填充充值订单
            if (this.$route.query.orderid) {
              this.order_msg = '数据加载中......'
              this.timer = setTimeout(this.phoneAddMsg, 500) 
            }
        })
      },
      // 获取提交记录status做提交前校验
      getRecordList() {
        getappealList({page: 1}).then(res => {
          if(res.status===0){
            this.recordList = res.data
          }
        })
      },
      // 点击编辑聚焦输入框
      focusclick() {
        this.$refs.editNum.focus()
      },
      // 校验姓名
      nameisChinese() {
        if(this.appealData.name){
          this.appealData.name = this.appealData.name.replace(/(^\s+)|(\s+$)/g, "");
          if (!this.appealData.name.match(/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/)) {
            this.nameRule = true
            this.appealData.name= ''
          } else {
            this.nameRule = false
          }
        }      
      }
    },
    beforeDestroy () {
      clearTimeout(this.timer)
    },
  }
</script>

<style lang="less">
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    margin-top: 54px;
  }

  .home {
    margin: 0;
    padding: 0;
    .charge-title {
      margin-top: 15px;
      margin-left: 5%;
      position: relative;
      img {
        position: absolute;
        top: 1px;
      }
    }
    // 公共class使用样式
    .charge-order {
      width: 90%;
      height: 46px;
      border: 1px solid #e5e5e5;
      border-radius: 8px;
      margin-left: 5%;
      margin-top: 10px;
      line-height: 46px;
      display: flex;
      overflow: hidden;
      .content {
        // width: 100%;
        flex-grow: 1;
        padding: 0 0 0 10px;
        background: linear-gradient(to bottom, #fefefe, #cdcccc);
        color: #4f4f4f;
      }
      .right-arrow {
        position: relative;
        width: 40px;
        text-align: center;
        background: linear-gradient(to bottom, #e6e6e6, #f0f0f0);
        img {
          width: 8px;
          height: 15px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
    // 单独加id的不同样式
    #order {
      height: auto;
      line-height: 34px;
      .content {
        div {
          display: flex;
          span:nth-of-type(1) {
            width: 80px;
          }
          span:nth-of-type(2) {
            // width: 100%;
            flex-grow: 1;
          }
        }
      }
    }
    #pay-time {
      width: 64%;
      height: 30px;
      min-width: 250px;
      line-height: 30px;
      box-sizing: border-box;
      .right-arrow {
        width: 40px;
        line-height: 30px;
      }
      img {
        width: 8px;
        height: 8px;
      }
    }
    #charge-num {
      width: 50%;
      height: 30px;
      box-sizing: border-box;
      .right-arrow {
        width: 60px;
        line-height: 30px;
        font-size: 14px;
      }
    }
    .editinput {
      box-sizing: border-box;
    }
    .charge-input {
      width: 100%;
      height: 30px;
      line-height: 30px;
      padding-left: 5px;
      box-sizing: border-box;
      background: linear-gradient(to bottom, #fefefe, #cdcccc);
      outline: none;
      border: none;
      float: left;
    }
    .pay-input {
      margin-left: 5%;
      margin-right: 5%;
      margin-top: 10px;
      padding-left: 10px;
      box-sizing: border-box;
      width: 90%;
      height: 30px;
      line-height: 30px;
      outline: none;
      border: none;
      background: url('../../assets/fillname.png') no-repeat;
      background-size: 100% 100%;
    }
    .upload-box::after {
      content: '';
      height: 0;
      clear: both;
      display: block;
    }
    .cube-upload {
      float: left;
      margin-left: 5%;
      margin-top: 10px;
    }
    .upload {
      float: left;
      margin-left: 5%;
      margin-top: 10px;
      div {
        width: 75px;
        height: 25px;
        text-align: center;
        line-height: 25px;
        background: white;
        color: red;
        border-radius: 5px;
      }
    }
    .submit {
      margin: 10px auto;
      margin-bottom: 0;
      text-align: center;
      div {
        font-size: 12px;
        color: #636363;
        margin-bottom: 10px;
      }
      img {
        width: 120px;
        height: 40px;
      }
    }
  }

  // 下面为mask1样式
  .van-popup.orderpup {
    width: 86%;
    border-radius: 15px;
  }
  .van-popup#uploadknow {
    width: 86%;
    border-radius: 15px;
    overflow: hidden;
  }
  .charge-content {
    // position: relative;
    .title1 {
      margin-top: 15px;
      margin-left: 5%;
    }
    .title2 {
      margin: 5px 0 0 5%;
      font-size: 14px;
      color: #636363;
    }
    img {
      width: 30px;
      height: 30px;
      position: absolute;
      top: 5px;
      right: 5px;
    }
    ul {
      list-style: none;
      padding-bottom: 125px;
    }
    li {
      width: 90%;
      margin: 15px 5% 0 5%;
      background: url('../../assets/chooseorder.png') no-repeat;
      background-size: 100% 100%;
      padding: 1px 0 10px 0;
      div {
        margin-top: 10px;
        margin-left: 10px;
        display: flex;
        color: #8a8a8a;
        span {
          width: 150px;
        }
        span:nth-of-type(2) {
          width: 100%;
        }
      }
    }
  }

  // 下面为mask2样式
  .mask-iknow {
    text-align: center;
    .content {
      background: white;
      border-radius: 15px;
      .title {
        text-align: center;
        padding-top: 10px;
      }
      .vanswipe {
        width: 80%;
        height: 380px;
        margin-left: 10%;
        padding-top: 15px;
        text-align: center;
        p {
          font-size: 14px;
          margin-bottom: 2px;
        }
        img {
          width: 180px;
          height: 90%;
        }
      }
      .iknow-img {
        width: 120px;
        height: 40px;
      }
    }
  }
  .pay-textarea{
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 10px;
    box-sizing: border-box;
    width: 90%;
  }
  .home {
    .cube-textarea{
      border-radius: 5px;
      border: 1px solid #e5e5e5;
    }
    .cube-textarea-wrapper::after{
      border:none;
    }
    .cube-textarea-wrapper{
      height: 80px;
    }
  }
  .cube-upload-btn-def i::before {
    display: none;
  }
  .cube-upload-btn-def i::after {
    display: none;
  }
  .cube-upload-btn, .cube-upload-btn-def {
    border: none;
  }
  .cube-upload-btn-def {
    background: url('../../assets/upload.png') no-repeat;
    background-size: 100% 100%;
  }
  .upload-box .cube-upload-file-def>.cubeic-wrong {
    color: rgba(0,0,0,0);
  }
  .upload-box .cube-upload-file-def>.cubeic-wrong::before {
    background: url('../../assets/delste.png') no-repeat;
    // background: url('../../assets/delste.png') no-repeat;
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
  }
  .home {
    .border-bottom-1px::after{
      border: none !important;
    }
    .border-top-1px::before{
      border: none !important;
    }
    .cube-radio-wrap{
      padding: 0 0 0 0 !important;
    }
    .cube-radio-label{
      color: red;
    }
    .cube-radio {
      padding: 0 !important;
    }
  }
</style>
